<template>
  <div class="welcome-container">
    <img src="@/assets/images/welcome.png" />
    <div class="welcome-text">
      <span v-if="nickName">尊敬的：{{ nickName }}，</span>欢迎回来！
    </div>
    <div class="current-time">{{ date }}</div>
  </div>
</template>

<script>
export default {
  name: "Welcome",
  data() {
    return {
      date: "------ --:--:--",
      nickName: "",
    };
  },
  mounted() {
    this.getNowTime();
    setInterval((_) => {
      this.getNowTime();
    }, 1000);
    try {
      let { nickName } = JSON.parse(
        localStorage.getItem("LOGIN_DATA")
      ).userInfo;
      this.nickName = nickName;
    } catch (error) {
      this.nickName = "";
    }
  },
  methods: {
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let min = date.getMinutes();
      let sec = date.getSeconds();
      this.date =
        year +
        "-" +
        this.completionZero(month) +
        "-" +
        this.completionZero(day) +
        " " +
        this.completionZero(hour) +
        ":" +
        this.completionZero(min) +
        ":" +
        this.completionZero(sec);
    },

    completionZero(num = 0) {
      return num < 10 ? "0" + num : num;
    },
  },
};
</script>

<style lang="less" scoped>
.welcome-container {
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img {
    width: 100px;
  }
  .welcome-text {
    font-size: 18px;
    padding: 20px 0 10px 0;
    color: var(--primary-color);
  }
  .current-time {
    font-size: 18px;
    color: #8a9295;
  }
}
</style>
